import {
	Graph,
	Dom,
	Node
} from '@antv/x6'
// import { basicPorts, customPorts } from './ports'

// 文本节点
export const TextNode = Graph.registerNode('text-node', {
	inherit: 'rect',
	width: 177,
	height: 45,
	attrs: {
		body: {
			rx: 4,
			ry: 4,
			fill: '#cce0ff',
			stroke: '#cce0ff',
		},
		img: {
			"xlink:href": "/static/imgs/textIcon.png",
			width: 37,
			height: 37,
			x: 4,
			y: 4,
		},
		text: {
			style: {
				fontSize: 20,
				fill: '#001666',
			},
			textWrap: {
				ellipsis: true,
				width: -80, // 宽度减少  
				height: '50%', // 高度为参照元素高度的一半
				ellipsis: true, // 文本超出显示范围时，自动添加省略号
				breakWord: true, // 是否截断单词
			}, 
			refX: 45,
			// refY: 0.5,
			refWidth: '100%',
			refHeight: '100%',
			x: 0,
			y: 0,
			textAlign: 'center',
			textAnchor: 'start',
			textVerticalAnchor: 'middle'
		},
	},
	markup: [{
			tagName: 'rect',
			selector: 'body',
		},
		{
			tagName: "image",
			selector: "img",
		},
		{
			tagName: 'text',
			selector: 'text',
		}
	],
	// ports: { ...basicPorts },
})
// 拍照节点
export const photoNode = Graph.registerNode('photo-node', {
	inherit: 'rect',
	width: 177,
	height: 45,
	attrs: {
		body: {
			rx: 4,
			ry: 4,
			fill: '#ffe7d9',
			stroke: '#ffe7d9',
		},
		img: {
			"xlink:href": "/static/imgs/photoIcon.png",
			width: 37,
			height: 37,
			x: 4,
			y: 4,
		},
		text: {
			style: {
				fontSize: 20,
				fill: '#712900',
			},
			textWrap: {
				ellipsis: true,
				width: -80, // 宽度减少  
				height: '50%', // 高度为参照元素高度的一半
				ellipsis: true, // 文本超出显示范围时，自动添加省略号
				breakWord: true, // 是否截断单词
			}, 
			refX: 45,
			// refY: 0.5,
			refWidth: '100%',
			refHeight: '100%',
			x: 0,
			y: 0,
			textAlign: 'center',
			textAnchor: 'start',
			textVerticalAnchor: 'middle'
		},
	},
	markup: [{
			tagName: 'rect',
			selector: 'body',
		},
		{
			tagName: "image",
			selector: "img",
		},
		{
			tagName: 'text',
			selector: 'text',
		}
	],
})
// 录像节点
export const videoNode = Graph.registerNode('video-node', {
	inherit: 'rect',
	width: 177,
	height: 45,
	attrs: {
		body: {
			rx: 4,
			ry: 4,
			fill: '#ded2ff',
			stroke: '#ded2ff',
		},
		img: {
			"xlink:href": "/static/imgs/videoIcon.png",
			width: 37,
			height: 37,
			x: 4,
			y: 4,
		},
		text: {
			style: {
				fontSize: 20,
				fill: '#2e195b',
			},
			textWrap: {
				ellipsis: true,
				width: -80, // 宽度减少  
				height: '50%', // 高度为参照元素高度的一半
				ellipsis: true, // 文本超出显示范围时，自动添加省略号
				breakWord: true, // 是否截断单词
			}, 
			refX: 45,
			// refY: 0.5,
			refWidth: '100%',
			refHeight: '100%',
			x: 0,
			y: 0,
			textAlign: 'center',
			textAnchor: 'start',
			textVerticalAnchor: 'middle'
		},

	},
	markup: [{
			tagName: 'rect',
			selector: 'body',
		},
		{
			tagName: "image",
			selector: "img",
		},
		{
			tagName: 'text',
			selector: 'text',
		}
	],
})
// 扫码节点
export const scanNode = Graph.registerNode('scan-node', {
	inherit: 'rect',
	width: 177,
	height: 45,
	attrs: {
		body: {
			rx: 4,
			ry: 4,
			fill: '#cbfed0',
			stroke: '#cbfed0',
		},
		img: {
			"xlink:href": "/static/imgs/scanIcon.png",
			width: 37,
			height: 37,
			x: 4,
			y: 4,
		},
		text: {
			style: {
				fontSize: 20,
				fill: '#086107',
			},
			textWrap: {
				ellipsis: true,
				width: -80, // 宽度减少  
				height: '50%', // 高度为参照元素高度的一半
				ellipsis: true, // 文本超出显示范围时，自动添加省略号
				breakWord: true, // 是否截断单词
			}, 
			refX: 45,
			// refY: 0.5,
			refWidth: '100%',
			refHeight: '100%',
			x: 0,
			y: 0,
			textAlign: 'center',
			textAnchor: 'start',
			textVerticalAnchor: 'middle'
		},
	},
	markup: [{
			tagName: 'rect',
			selector: 'body',
		},
		{
			tagName: "image",
			selector: "img",
		},
		{
			tagName: 'text',
			selector: 'text',
		}
	],
})
// 测温节点
export const wenNode = Graph.registerNode('wen-node', {
	inherit: 'rect',
	width: 177,
	height: 45,
	attrs: {
		body: {
			rx: 4,
			ry: 4,
			fill: '#fecbcb',
			stroke: '#fecbcb',
		},
		img: {
			"xlink:href": "/static/imgs/wenIcon.png",
			width: 37,
			height: 37,
			x: 4,
			y: 4,
		},
		text: {
			style: {
				fontSize: 20,
				fill: '#6c200f',
			},
			textWrap: {
				ellipsis: true,
				width: -80, // 宽度减少  
				height: '50%', // 高度为参照元素高度的一半
				ellipsis: true, // 文本超出显示范围时，自动添加省略号
				breakWord: true, // 是否截断单词
			}, 
			refX: 45,
			// refY: 0.5,
			refWidth: '100%',
			refHeight: '100%',
			x: 0,
			y: 0,
			textAlign: 'center',
			textAnchor: 'start',
			textVerticalAnchor: 'middle'
		},
	},
	markup: [{
			tagName: 'rect',
			selector: 'body',
		},
		{
			tagName: "image",
			selector: "img",
		},
		{
			tagName: 'text',
			selector: 'text',
		}
	],
})
//语音节点
export const audioNode = Graph.registerNode('audio-node', {
	inherit: 'rect',
	width: 177,
	height: 45,
	attrs: {
		body: {
			rx: 4,
			ry: 4,
			fill: '#cce0ff',
			stroke: '#cce0ff',
		},
		img: {
			"xlink:href": "/static/imgs/audioIcon.png",
			width: 37,
			height: 37,
			x: 4,
			y: 4,
		},
		text: {
			style: {
				fontSize: 20,
				fill: '#001666',
			},
			textWrap: {
				ellipsis: true,
				width: -80, // 宽度减少  
				height: '50%', // 高度为参照元素高度的一半
				ellipsis: true, // 文本超出显示范围时，自动添加省略号
				breakWord: true, // 是否截断单词
			}, 
			refX: 45,
			// refY: 0.5,
			refWidth: '100%',
			refHeight: '100%',
			x: 0,
			y: 0,
			textAlign: 'center',
			textAnchor: 'start',
			textVerticalAnchor: 'middle'
		},
	},
	markup: [{
			tagName: 'rect',
			selector: 'body',
		},
		{
			tagName: "image",
			selector: "img",
		},
		{
			tagName: 'text',
			selector: 'text',
		}
	],
})